<template>
  <div class="map" id="map"></div>
</template>

<script>
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import TileArcGISRest from "ol/source/TileArcGISRest";
import { Tile as TileLayer } from "ol/layer";
import CONSTANT from "@/config/constant.js";
export default {
  name: "ArcGIS_Map",

  methods: {
    init() {
      this.map = new Map({
        layers: [
          
        ],
        target: "map",
        view: new View({
          center: [113.0567, 23.67537],
          maxZoom: 18,
          minZoom: 8,
          zoom: 13,
          projection: "EPSG:4326"
        })
      });
      let layers = new TileLayer({
        source: new TileArcGISRest({
          url: "http://192.168.31.29:6080/arcgis/rest/services/GDQY/MapServer/export"
        })
      })
      this.map.addLayer(layers);
    }
  },

  mounted() {
    this.init();
  }
};
</script>

<style lang="less" scoped>
.map-box {
  position: relative;
  .map {
    height: 100%;
  }
}
</style>